<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./css/uikit.css">
    <link rel="stylesheet" type="text/css" href="icon.css">
    <link rel="stylesheet" type="text/css" href="./css/test.css">
    <script type="text/javascript" src="./js/uikit.js"></script>
    <script type="text/javascript" src="./js/uikit-icons.js"></script>
    <script type="text/javascript" src="./js/jsflv.min.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
</head>

<body>
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent;"
     class="uk-sticky uk-navbar-transparent">
    <nav class="uk-visible@m uk-background-secondary uk-light uk-navbar" uk-navbar>
        <div class="uk-navbar-left">
            <a class="uk-navbar-item uk-logo" href="#">WEB</a>
            <ul class="uk-navbar-nav">
                <li class="uk-active">
                    <a style="font-size: larger" href="#">直播</a>
                </li>
            </ul>
        </div>

        <!--        顶部右侧区域-->
        <div class="uk-navbar-right">
            <div class="uk-navbar-item uk-visible@l">
                <a class="uk-navbar-toggle" href="#" uk-icon="search"></a>
                <div class="uk-drop" uk-drop="mode: click; pos: left-center;offset:0">
                    <div class="uk-grid-small uk-flex-middle" uk-grid>
                        <div class="uk-width-expand">
                            <form class="uk-search uk-search-navbar uk-width-1-1">
                                <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
                            </form>
                        </div>
                        <div class="uk-width-auto">
                            <a class="uk-navbar-dropdown-close" href="#" uk-close></a>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <a uk-icon="user"></a>
                <div class="uk-width-auto" uk-dropdown>
                    <div>
                        <p>Welcome,user!</p>
                        <a class="uk-button uk-button-primary" uk-icon="sign-out" href="../login.html">退出登录</a>
                    </div>
                </div>

            </div>
            <div class="uk-navbar-item uk-visible@l">
                <!--                <button class="uk-button uk-button-text" onclick="login1()">登录</button>-->
                <!--                <a class="uk-button uk-button-primary uk-margin-small-left uk-border-pill" href="">注册</a>-->
                <!--                <a class="uk-icon" uk-icon="icon:settings" aria-expanded="false">设置</a>-->
                <a class="uk-button uk-button-text uk-icon uk-margin-small-left uk-border-pill"
                   href="config/cfg_bsp_base.html" uk-icon="cog"></a>
                <!--                    下拉框 dropdown-->
                <div class="uk-width-auto" uk-dropdown>
                    <!--                    <div class="uk-dropdown-grid" uk-dropdown="top-left" uk-grid>-->
                    <div>
                        <li><a href="config/cfg_REC.html">应用设置</a></li>
                        </ul> -->
                    </div>
                </div>
                <!--                    下拉框结束-->
            </div>
        </div>
        <!--        右侧区域结束-->
    </nav>
</div>

<div class="uk-sticky-placeholder" style="height: 80px;margin: 0px;" hidden></div>

<div class="uk-main uk-margin">
    <!--<div class="uk-margin uk-child-width-expand@s uk-child-width-1-1" uk-grid>-->
    <div class="uk-margin uk-child-width-expand@m" uk-grid>

        <!--        <div class="uk-child-width-1-1 uk-child-width-1-2@m uk-text-center" uk-grid>-->
        <div class="uk-width-2-3@m">
            <!--        <div class="uk-inline">-->
            <div id="toolbar" class="uk-align-center">
                <ul class="uk-subnav uk-subnav-pill uk-margin-left">
                    <li class="uk-active"><a href="#">播放设置</a></li>
                    <li><a href="javascript:void(0)" onclick="flv_start()">播放</a></li>
                    <li><a href="javascript:void(0)" onclick="flv_pause()">暂停</a></li>
                    <!-- <li><a href="javascript:void(0)" onclick="real_time()">test</a></li> -->
                </ul>
            </div>
            <div class="" style="width: 100%">
                <!-- style="width: 100%; height: 100%; object-fit: fill"  -->
                <video id="videoElement" class="centeredVideo" controls autoplay muted="muted">
                    Your browser is too old which doesn't support HTML5 video.
                </video>
            </div>
            <!--            <div class="uk-margin">-->
            <!--                <div>-->
            <!--                    <button class="uk-button uk-button-default uk-button-primary" onclick="forward()">前进</button>-->
            <!--                </div>-->
            <!--                <div class="uk-margin-small">-->
            <!--                    <button class="uk-button uk-button-default uk-button-primary" onclick="right()">左转</button>-->
            <!--                    <button class="uk-button uk-button-default uk-button-primary" onclick="stop()">停止</button>-->
            <!--                    <button class="uk-button uk-button-default uk-button-primary" onclick="left()">右转</button>-->
            <!--                </div>-->
            <!--                <div class="uk-margin-small">-->
            <!--                    <button class="uk-button uk-button-default uk-button-primary" onclick="back()">后退</button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--        </div>-->
        </div>
        <div class="uk-width-1-3@m uk-margin-large">
            <!--        style="margin-left: 500px;margin-top: 60px"-->
            <!-- style="width: 450px;height: 300px" -->
            <canvas id="canvas" width="450" height="300" style="margin-left: 20px;">
                <!--                    style="width: 1000px;height: 300px"-->
            </canvas>
            <div class="uk-text-center uk-margin">
                            <div class="uk-margin">
                                <div>
                                    <button class="uk-button uk-button-default uk-button-primary" onclick="forward()">前进</button>
                                </div>
                                <div class="uk-margin-small">
                                    <button class="uk-button uk-button-default uk-button-primary" onclick="right()">左转</button>
                                    <button class="uk-button uk-button-default uk-button-primary" onclick="stop()">停止</button>
                                    <button class="uk-button uk-button-default uk-button-primary" onclick="left()">右转</button>
                                </div>
                                <div class="uk-margin-small">
                                    <button class="uk-button uk-button-default uk-button-primary" onclick="back()">后退</button>
                                </div>
                            </div>
                        </div>
            </div>

        </div>


    </div>

</div>
<style>
    canvas {
        border: 1px solid dodgerblue;
    }
</style>

<script>
    // var speed = 0;
    // var x = 10;
    // var y = 10;
    let xnow = 0;
    let ynow = 75;
    let drawFlag = 0;

    // var  req = {
    // "cmd": 1,
    // "arg1": 0
    // };


    //   let canvas = document.getElementById('canvas');
    //   let ctx = canvas.getContext('2d');
    // ctx.lineWidth = "2";
    // ctx.strokeStyle = "black";
    // ctx.beginPath();
    // ctx.moveTo(0,100);

    mytest();

    function mytest() {
        let canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            console.log("my test");
            let ctx = canvas.getContext('2d');

            ctx.beginPath();
            ctx.lineWidth = "2";
            ctx.strokeStyle = "blue";
            //ctx.rect(2, 100, 500, 100);
            ctx.moveTo(0, 50);
            ctx.lineTo(240, 50);
            ctx.moveTo(0, 100);
            ctx.lineTo(240, 100);
            ctx.stroke();
            ctx.beginPath();
            var cx = 240; // 圆心x 坐标值
            var cy = 150; // 圆心y 坐标值
            var radius = 100; // 圆弧半径
            var startAngle = (3 * Math.PI) / 2; // 开始点
            var endAngle = 0; // 结束点
            var anticlockwise = false; // 顺时针或逆时针
            ctx.arc(cx, cy, radius, startAngle, endAngle, anticlockwise);
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(cx, cy, radius - 50, startAngle, endAngle, anticlockwise);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(cx + 50, cy);
            ctx.lineTo(cx + 50, cy + 300);
            ctx.moveTo(cx + 100, cy);
            ctx.lineTo(cx + 100, cy + 300);
            ctx.stroke();
        }
    }

    function real_time() {
        const req_dis = {
            "dis": 1,
            "arg": 0
        }
        $.ajax({
            async: true,
            type: "post",
            url: 'test.php',
            data: JSON.stringify(req_dis),
            contentType: 'application/json', // req body type;
            dataType: "json", // rsp body type;
            success: function (data) {
                console.log("rsp:" + JSON.stringify(data));
                var dis_t = data['dis'];
                console.log("dis_t:"+dis_t);
                draw(dis_t);
                var flag = data['flag'];
                draw_Xflag(flag);
            },
            error: function () {
                //TODO;
                alert("defeat");
            }
        });
    }

    function draw_Xflag(params) {
        var flag = params;
        if(drawFlag !== 1) flag = 0;//只有按下前进后 才根据flag画叉
        if(flag == 1){
            
        let canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            let ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.lineWidth = "3";
            ctx.strokeStyle = "red";
            ctx.moveTo(xnow-10, ynow-10);
            ctx.lineTo(xnow+10, ynow+10);
            ctx.moveTo(xnow-10, ynow+10);
            ctx.lineTo(xnow+10, ynow-10);console.log("flag ="+flag);
            ctx.stroke();
        }
        }
    }

    let t = 0;
    function draw(data) {

        let distence = data;
      
        let canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            let ctx = canvas.getContext('2d');

            ctx.beginPath();
            ctx.lineWidth = "2";
            ctx.strokeStyle = "black";
            
            //距离足够大 且 按下前进后 才开始画  按下停止 则暂停画 按下后退 应该反向画痕迹覆盖
            if (distence > 5 && (drawFlag != 0)) {
                // setTimeout(function () {
                //     real_time();
                //     }, 1000);
                if (xnow < 240) {
                    ctx.moveTo(xnow, 75);
                    //now = parseInt(2.4*(100-parseInt(distence)));//当前位置
                    //console.log("now="+now);
                    if(drawFlag == 1)
                         xnow += 10;
                    else if(drawFlag ==2){
                         xnow -= 10;
                         ctx.strokeStyle = "white";
                    }

                    ctx.lineTo(xnow, 75);
                    // ctx.stroke();
                    // speed += 1;
                    //speed += 1;
                    // if (speed % 5 === 0)
                    ctx.stroke();
                    // setTimeout(function () {
                    //     draw(distence);
                    // }, 1000);
                }
                else if (xnow == 240){
                    if(t < 3){
                    // var startAngle = ((3 * Math.PI) / 2)+(Math.PI/6)*t; // 开始点
                    // var endAngle = ((3 * Math.PI) / 2)+(Math.PI/6)*(t+1); // 结束点
                    var startAngle = (9+t)*Math.PI/6; // 开始点
                    var endAngle = (10+t)*Math.PI/6; // 结束点
                    if(endAngle == Math.PI* 2) endAngle = 0;
                    t++;
                    // console.log("t = "+t+"endAngle = "+ endAngle);
                    // var startAngle = (3 * Math.PI) / 2; // 开始点
                    // var endAngle = 0; // 结束点
                    var anticlockwise = false; // 顺时针或逆时针
                    ctx.beginPath();
                    ctx.lineWidth = "2";
                    ctx.strokeStyle = "black";
                    ctx.arc(240, 150, 75, startAngle, endAngle, anticlockwise);
                    ctx.stroke();
                    }
                    if(t == 3){
                        xnow = 240+75;
                        ynow = 150;
                        t = 0;
                    }
                }
                else if (xnow > 240 && ynow <= 300){
                    ctx.moveTo(xnow, ynow);
                    if(drawFlag == 1)
                         ynow += 6;
                    else if(drawFlag == 2){
                         ynow -= 6;
                         ctx.strokeStyle = "white";
                    }
                    //ynow += 6;
                    ctx.lineTo(xnow, ynow);
                    ctx.stroke();
                }
                else{ }
            }
            setTimeout(function () {
                    real_time();
                    }, 1000);
            console.log("xnow = "+ xnow + ";ynow = "+ynow);
        }

        // ctx.beginPath();
        // ctx.lineWidth="2";
        // ctx.lineJoin="round";
        // ctx.strokeStyle='#e0c';
        //
        // for(var i=0;i<100;i+=10){
        //     ctx.moveTo(x-dx,50*Math.sin(Math.PI*(x-dx)/90)+200 + i * 3);
        //     ctx.lineTo(x, 50 * Math.sin(Math.PI * x / 90) + 200 + i * 3);
        //     ctx.stroke();
        // }
        // x+=dx;
        // ctx.lineWidth = "2";
        // ctx.strokeStyle = "black";
        // ctx.beginPath();
        //
        // ctx.moveTo(0,100);

        // ctx.lineWidth = "2";
        // ctx.strokeStyle = "black";
        // ctx.beginPath();
        // ctx.moveTo(0,100);
        // ctx.lineTo(x,y);
    }

    
    function flv_load() {

        // if (flvjs.isSupported()) {
            // function flv_load() {
            //     console.log('isSupported: ' + flvjs.isSupported());
            //var ishttps = ('https:' == document.location.protocol) ? true : false
            var mediaDataSource = {
                type: "flv",
                isLive: true, //直播
                //cors: true,
                //hasAudio: audio,
                autoCleanupSourceBuffer: true,
                url: 'http://172.20.10.3/live?port=1935&app=http_flv&stream=test1'
            }
            console.log('MediaDataSource', mediaDataSource);
            var element = document.getElementById('videoElement');
            //var player;
            // element.width = w2ui['main_layout'].get('main').width - 0;
            // element.height = w2ui['main_layout'].get('main').height - $('#toolbar').outerHeight();
            if (typeof player !== "undefined") {
                if (player != null) {
                    player.unload();
                    player.detachMediaElement();
                    player.destroy();
                    player = null;
                    console.log("flv_load => destroy player!");
                }
            }
            player = flvjs.createPlayer(mediaDataSource, {
                // enableWorker: false,
                // lazyLoadMaxDuration: 3 * 60,
                // seekType: 'range',
                enableWorker: true,
                enableStashBuffer: false,
                stashInitialSize: 128,
            });
            player.attachMediaElement(element);
            player.load();
            player.play();
        //}

    }

    function flv_start() {
        //console.log(player.mediaInfo)
        flv_load();
        //player.load();
        //player.play();
    }

    function flv_pause() {
        console.log(player.mediaInfo)
        player.pause();
    }

    function flv_destroy() {
        if (player != null) {
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
            console.log("flv_destroy => destroy player!");
        }
    }

    function flv_seekto() {
        var input = document.getElementsByName('seekpoint')[0];
        player.currentTime = parseFloat(input.value);
    }

    function flv_seektoend() {
        console.log("seek to end", player.buffered.end(0));
        player.currentTime = player.buffered.end(0) - 0.01;

    }

    function forward() {
        const req = {
            "cmd": 1,
            "arg1": 1
        }
        //req.arg1 = 1;

        $.ajax({
            async: true,
            type: "post",
            url: 'socketcli.php',
            data: JSON.stringify(req),
            contentType: 'application/json', // req body type;
            // dataType: "json", // rsp body type;
            success: function (data) {
                console.log("rsp:" + data);
                real_time();
                drawFlag = 1;
                alert(data);
            },
            error: function () {
                //TODO;
                alert("defeat");
            }
        });
    }


    function back() {
        const req = {
            "cmd": 1,
            "arg1": 2
        }
        //req.arg1 = 2;
        $.ajax({
            async: true,
            type: "post",
            url: 'socketcli.php',
            data: JSON.stringify(req),
            contentType: 'application/json', // req body type;
            // dataType: "json", // rsp body type;
            success: function (data) {
                console.log("rsp:" + data);
                drawFlag =2;
                alert(data);
            },
            error: function () {
                //TODO;
                alert("defeat");
            }
        });
    }

    function left() {
        const req = {
            "cmd": 1,
            "arg1": 3
        }
       //req.arg1 = 3;
        $.ajax({
            async: true,
            type: "post",
            url: 'socketcli.php',
            data: JSON.stringify(req),
            contentType: 'application/json',
            success: function (data) {
                console.log("rsp:" + data);
                alert(data);
            },
            error: function () {
                //TODO;
                alert("defeat");
            }
        });
    }

    function right() {
        const req = {
            "cmd": 1,
            "arg1": 4
        }
        //req.arg1 = 4;
        $.ajax({
            async: true,
            type: "post",
            url: 'socketcli.php',
            data: JSON.stringify(req),
            contentType: 'application/json', // req body type;
            // dataType: "json", // rsp body type;
            success: function (data) {
                console.log("rsp:" + data);
                alert(data);
            },
            error: function () {
                //TODO;
                alert("defeat");
            }
        });
    }

    function stop() {

        const req = {
            "cmd": 1,
            "arg1": 5
        }
       // req.arg1 = 5;
        $.ajax({
            async: true,
            type: "post",
            url: 'socketcli.php',
            data: JSON.stringify(req),
            contentType: 'application/json', // req body type;
            // dataType: "json", // rsp body type;
            success: function (data) {
                console.log("rsp:" + data);
                drawFlag = 0;
                alert(data);
            },
            error: function () {
                //TODO;
                alert("defeat");
            }
        });
    }

    $(document).ready(function () {
            flv_load();
        }
    );
    //flv_load();

    // $(function () {
    //     flv_load();
    //     draw();
    // });
</script>
</body>

</html>